.input-wrapper {
  display: flex;
  position: relative;
  height: 100%;

  .input {
    @include input-size();
    width: 100%;
    background-color: $input-bg;
    border: $input-border-width solid $input-border-color;
    box-shadow: none;
    transition: $input-transition;

    &.input-icon {
      padding-left: $input-icon-padding-x;
    }

    &.input-has-prefix {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &.input-has-suffix {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:hover {
      border-color: $input-focus-border-color;
    }

    &:focus {
      background-color: $input-focus-bg;
      border: $input-border-width solid $input-focus-border-color;
      color: $input-focus-color;
      box-shadow: $input-focus-box-shadow;
      outline: none;

      & .error {
        box-shadow: $input-focus-box-shadow-error;
      }
    }

    &[disabled],
    &.disabled {
      background-color: $input-disabled-bg;
      border-color: $input-border-color;
      cursor: not-allowed;

      &:focus {
        outline: none;
        box-shadow: none;
      }

      &:hover {
        border-color: $input-border-color;
      }

      >* {
        pointer-events: none;
      }
    }

    &::placeholder {
      color: $input-placeholder-color;
      opacity: 1
    }
  }

  .input-sm {
    @include input-size($input-padding-y-sm, $input-padding-x-sm, $input-font-size-sm, $input-border-radius-sm);
  }

  .input-lg {
    @include input-size($input-padding-y-lg, $input-padding-x-lg, $input-font-size-lg, $input-border-radius-lg);
  }

  .icon-wrapper {
    display: flex;
    align-items: center;
    position: absolute;
    height: 100%;
    transform: $input-icon-translate-x;
    color: $input-placeholder-color;
    font-size: $input-icon-font-size;
  }

  .input-prefix {
    @include input-prefix-suffix('prefix')
  }

  .input-prefix-sm {
    @include input-prefix-suffix('prefix', 'sm')
  }

  .input-prefix-lg {
    @include input-prefix-suffix('prefix', 'lg')
  }

  .input-suffix {
    @include input-prefix-suffix('suffix')
  }

  .input-suffix-sm {
    @include input-prefix-suffix('suffix', 'sm')
  }

  .input-suffix-lg {
    @include input-prefix-suffix('suffix', 'lg')
  }
}